<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>个人资料</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.css" rel="stylesheet" />
  <link href="../css/style.css?100" rel="stylesheet" />
  <script src="../js/flexible.js"></script>
  <script src="../js/flexible_css.js"></script>
  <script src="../js/mui.js"></script>
  <script type="text/javascript" src="../js/mui.picker.js"></script>
  <script type="text/javascript" src="../js/mui.poppicker.js"></script>
  <script type="text/javascript" src="../js/city.data-3.js"></script>
	<script src="../js/axios-proxy.js"></script>
	<script src="../conf.js"></script>
	<script src="../js/api.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">个人资料</h1>
</header>
<div class="personal-data" id="app" v-cloak>
  <ul class="personal-data-ul">
    <li>
      <label for="">真实姓名：</label>
      <input type="text" v-model="userInfo.truename" title="真实姓名">
    </li>
    <li>
      <label for="">手机号：</label>
      <input type="text" readonly v-model="userInfo.phone" title="手机号">
    </li>
    <li class="active" @click="chooseArea()">
      <label for="">所属省份：</label>
      <span>{{userInfo.province}}</span>
    </li>
    <li class="active" @click="chooseArea()">
      <label for="">所属城市：</label>
      <span>{{userInfo.city}}</span>
    </li>
    <li class="active" @click="chooseArea()">
      <label for="">所属地区：</label>
      <span>{{userInfo.area}}</span>
    </li>
    <li class="active-textarea">
      <label for="">详细地址：</label>
      <textarea title="详细地址" v-model="userInfo.address" placeholder="请输入详细地址"></textarea>
    </li>
  </ul>
  <div class="personal-data-btns">
    <button @click="saveInfo">提&nbsp;交</button>
  </div>
</div>
<script type="text/javascript">
  mui.init()
  mui(function () {
    cityPicker = new mui.PopPicker({
      layer: 3
    });
    cityPicker.setData(cityData3);
  });
  //关闭选择器
  function closeChoose(){
    cityPicker.hide();
  }
	let vm = new Vue({
		el: "#app",
		data: {
			userInfo: {
				phone: loginPhone,
				truename: "",
				province: "请选择",
				city: "请选择",
				area: "请选择",
				address: ""
			},
			userInfoName: [
				'phone',
				'truename',
				'province',
				'city',
				'area',
				'address'
			]
		},
		created:function(){
			mui.init({
				pullRefresh: autoRefresh('#app', this.getinfo)
			});
		},
		methods: {
			getinfo:function(){
				getpersondata({
					phone:loginPhone
				},function(res){
					vm.userInfo = {
						phone: loginPhone,
						truename: res.data.truename,
						province: res.data.province,
						city: res.data.city,
						area: res.data.area,
						address: res.data.address
					};
					vm.$nextTick(function(){
						refreshContainer('#app');
					})
				})
			},
			chooseArea: function(){
			  cityPicker.show(function(items) {
			    // items为选中的三级区域信息
					vm.userInfo.province = items[0]['text'];
					vm.userInfo.city = items[1]['text'];
					vm.userInfo.area = items[2]['text'];
			  });
			},
			provinginfo:function(val){
				if(this.userInfo[val] === '' || this.userInfo[val] === '请选择'){
					return false
				}else{
					return true
				}
			},
			saveInfo:function(){
				for(var i = 0; i < this.userInfoName.length; i++){
					if(!this.provinginfo(this.userInfoName[i])){
						smallPopup('请填写完整信息');
						return
					}
				}
				updateuserinfo(this.userInfo, function(res){
					if(res.result === 1){
						smallPopup('保存成功')
					}
				})
			}
		}
	});
</script>
</body>

</html>
